<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>框架 · Twitter Bootstrap中文版/中文翻译</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body data-spy="scroll" data-target=".subnav" data-offset="50">


  <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">概述</a>
              </li>
              <li class="active">
                <a href="./scaffolding.html">框架</a>
              </li>
              <li class="">
                <a href="./base-css.html">基础CSS</a>
              </li>
              <li class="">
                <a href="./components.html">组件</a>
              </li>
              <li class="">
                <a href="./javascript.html">Javascript插件</a>
              </li>
              <li class="">
                <a href="./less.html">使用LESS</a>
              </li>
              <li class="divider-vertical"></li>
              <li class="">
                <a href="./download.html">定制</a>
              </li>
              <li class="">
                <a href="./examples.html">例子</a>
              </li>
	      <li class="">
                <a href="./wrongway.html">译者言</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Masthead
      ================================================== -->
      <header class="jumbotron subhead" id="overview">
        <h1>框架</h1>
        <p class="lead">
	  Bootstrap创建了响应式的12列栅格系统，并在该系统的基础上设计了固定(fixed)布局和流动宽度(fluid-width)布局。
	</p>
        <div class="subnav">
          <ul class="nav nav-pills">
            <li><a href="#global">全局样式</a></li>
            <li><a href="#gridSystem">栅格系统</a></li>
            <li><a href="#fluidGridSystem">流动栅格系统</a></li>
            <li><a href="#gridCustomization">自定义</a></li>
            <li><a href="#layouts">布局</a></li>
            <li><a href="#responsive">响应式设计</a></li>
          </ul>
        </div>
      </header>




<!-- Global Bootstrap settings
================================================== -->
<section id="global">
  <div class="page-header">
    <h1>全局样式 <small>重置CSS，排版和链接</small></h1>
  </div>
  <div class="row">
    <div class="span4">
      <h2>要求HTML5 doctype</h2>
      <p>
	Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。
      </p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  ...
&lt;/html&gt;
</pre>
    </div><!-- /.span -->
    <div class="span4">
      <h2>排版和链接</h2>
      <p>在 <strong>scaffolding.less</strong> 文件中，设置了基本的全局显示效果，排版和链接样式。具体来说，我们:</p>
      <ul>
        <li>移除了body的margin</li>
        <li>设置 <code>body</code> 背景色为 <code>background-color: white;</code> </li>
        <li>将 <code>@baseFontFamily</code>, <code>@baseFontSize</code>, 和 <code>@baseLineHeight</code> 做为排版的基础变量</li>
        <li>使用 <code>@linkColor</code> 设置全局链接的颜色，链接仅在 <code>:hover</code> 状下显示下划线</li>
      </ul>
    </div><!-- /.span -->
    <div class="span4">
      <h2>通过Normalize重置默认样式</h2>
      <p>
	从Bootstrap 2开始，使用 <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a> 对默认的CSS进行重置(reset)。
	 <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a> 项目由 <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> 创建 <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a> 项目也出于他手。
      </p>
      <p>
	新的reset代码保存在 <strong>reset.less</strong> ，并移除了一些元素，从而更加简洁明了。
      </p>
    </div><!-- /.span -->
  </div><!-- /.row -->
</section>




<!-- Grid system
================================================== -->
<section id="gridSystem">
  <div class="page-header">
    <h1>默认栅格系统 <small>响应式的12列系统</small></h1>
  </div>

  <div class="row show-grid">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
  </div>
  <div class="row show-grid">
    <div class="span4">4</div>
    <div class="span4">4</div>
    <div class="span4">4</div>
  </div>
  <div class="row show-grid">
    <div class="span4">4</div>
    <div class="span8">8</div>
  </div>
  <div class="row show-grid">
    <div class="span6">6</div>
    <div class="span6">6</div>
  </div>
  <div class="row show-grid">
    <div class="span12">12</div>
  </div>
  <div class="row">
    <div class="span4">
      <p>
	做为框架默认的一部分，Bootstrap提供了<strong>940px宽, 12列的栅格系统</strong>。
      </p>
      <p>
	针对各种不同的设备和分辨率，Bootstrap提供了四种响应式方案：手机，垂直平板，水平平板/小型桌面，宽屏桌面。
      </p>
    </div><!-- /.span -->
    <div class="span4">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
  &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
    </div><!-- /.span -->
    <div class="span4">
      <p>
	如左，一个基本的布局由两个“列”组成，栅格系统由一系列横跨12等分的"span*"组成。
      </p>
    </div><!-- /.span -->
  </div><!-- /.row -->

  <br>

  <h2>列的偏移</h2>
  <div class="row show-grid">
    <div class="span4">4</div>
    <div class="span4 offset4">4 offset 4</div>
  </div><!-- /row -->
  <div class="row show-grid">
    <div class="span3 offset3">3 offset 3</div>
    <div class="span3 offset3">3 offset 3</div>
  </div><!-- /row -->
  <div class="row show-grid">
    <div class="span8 offset4">8 offset 4</div>
  </div><!-- /row -->
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
  &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>

  <br>

  <h2>列的内嵌</h2>
  <div class="row">
    <div class="span6">
      <p>
	在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌，
	只要在一个已存在的 <code>.span*</code> 列中，嵌套一个新的 <code>.row</code> 列，然后在 <code>.row</code> 列中再添加一组 <code>.span*</code> 列即可。
      </p>
      <h3>例子</h3>
      <p>
	内嵌的行应该包含多个列，行的 <code>span*</code> 应该是几个内嵌列 <code>span*</code> 之和。
	例如，两个内嵌的 <code>.span3</code> 列应该包含在 <code>.span6</code> 列中。
      </p>
      <div class="row show-grid">
        <div class="span6">
          Level 1 of column
          <div class="row show-grid">
            <div class="span3">
              Level 2
            </div>
            <div class="span3">
              Level 2
            </div>
          </div>
        </div>
      </div>
    </div><!-- /.span -->
    <div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
  &lt;div class="span12"&gt;
    Level 1 of column
    &lt;div class="row"&gt;
      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    </div><!-- /.span -->
  </div><!-- /.row -->
</section>



<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
  <div class="page-header">
    <h1>流式栅格系统 <small>基本于百分比的12列响应式布局</small></h1>
  </div>

  <h2>列的流式排布</h2>
  <div class="row-fluid show-grid">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
  </div>
  <div class="row-fluid show-grid">
    <div class="span4">4</div>
    <div class="span4">4</div>
    <div class="span4">4</div>
  </div>
  <div class="row-fluid show-grid">
    <div class="span4">4</div>
    <div class="span8">8</div>
  </div>
  <div class="row-fluid show-grid">
    <div class="span6">6</div>
    <div class="span6">6</div>
  </div>
  <div class="row-fluid show-grid">
    <div class="span12">12</div>
  </div>

  <div class="row">
    <div class="span4">
      <h3>基于百分比，而非像素</h3>
      <p>
	流式栅格系统中的列宽使用百分比计算宽度而非像素。与像素栅格布局一样，Bootstrap根据设备和分辨率不同提供了不同的响应性方案。
      </p>
    </div><!-- /.span -->
    <div class="span4">
      <h3>行的流式布局</h3>
      <p>
	把固定布局变成流式布局很简单，把 <code>.row</code> 变成 <code>.row-fluid</code> 即可，列内容不变，因此在流式布局和固定布局之间转换非常简单。
      </p>
    </div><!-- /.span -->
    <div class="span4">
      <h3>补充</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
  &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
    </div><!-- /.span -->
  </div><!-- /.row -->

  <h2>流式列的内嵌</h2>
  <div class="row">
    <div class="span6">
      <p>
	流式列的内嵌稍稍有点不同：内嵌列的宽度与父级无关，而要视兄弟列而定，因为所有的内嵌列都是按比例分配父列的100%宽度。
      </p>
      <div class="row-fluid show-grid">
        <div class="span12">
          Fluid 12
          <div class="row-fluid show-grid">
            <div class="span6">
              Fluid 6
            </div>
            <div class="span6">
              Fluid 6
            </div>
          </div>
        </div>
      </div>
    </div><!-- /.span -->
    <div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
  &lt;div class="span12"&gt;
    Level 1 of column
    &lt;div class="row-fluid"&gt;
      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    </div><!-- /.span -->
  </div><!-- /.row -->

</section>



<!-- Customizaton
================================================== -->
<section id="gridCustomization">
  <div class="page-header">
    <h1>自定义栅格</h1>
  </div>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>变量</th>
        <th>默认值</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>@gridColumns</code></td>
        <td>12</td>
        <td>列的数量</td>
      </tr>
      <tr>
        <td><code>@gridColumnWidth</code></td>
        <td>60px</td>
        <td>每列的宽度</td>
      </tr>
      <tr>
        <td><code>@gridGutterWidth</code></td>
        <td>20px</td>
        <td>列之间的间隔宽度</td>
      </tr>
      <tr>
        <td><code>@siteWidth</code></td>
        <td><em>计算所有列的总宽度（含间隔）</em></td>
        <td>计算列的总宽度以设置 <code>.container-fixed()</code> 的宽度</td>
      </tr>
    </tbody>
  </table>
  <div class="row">
    <div class="span4">
      <h3>LESS中的变量</h3>
      <p>
	Bootstrap内置了一组很有用的变量，用以定制上述的默认940px栅格系统。这些变量保存在variables.less中。
      </p>
    </div><!-- /.span -->
    <div class="span4">
      <h3>如何定制</h3>
      <p>
	修改栅格意味着改变三个 <code>@grid*</code> 变量并要重新编译Bootstrap。
	改变variables.less中的栅格变量，再使用<a href="less.html#compiling">四种方式中的某一种重编译less</a>。
	在添加更多列之前，要先在grid.less在定义这三个变量。
      </p>
    </div><!-- /.span -->
    <div class="span4">
      <h3>保持响应性</h3>
      <p>
	定制的栅格只能工作在默认的940px下，若要保证Bootstrap的全面响应性，还得更改responsive.less中的栅格内容。
      </p>
    </div><!-- /.span -->
  </div><!-- /.row -->

</section>



<!-- Layouts (Default and fluid)
================================================== -->
<section id="layouts">
  <div class="page-header">
    <h1>布局 <small>用基础模板创建网页</small></h1>
  </div>

  <div class="row">
    <div class="span6">
      <h2>固定布局</h2>
      <p>
	用 <code>&lt;div class="container"&gt;</code> 实现的简单的中央布局的页面，默认为940px宽。
      </p>
      <div class="mini-layout">
        <div class="mini-layout-body"></div>
      </div>
<pre class="prettyprint linenums">
&lt;body&gt;
  &lt;div class="container"&gt;
    ...
  &lt;/div&gt;
&lt;/body&gt;
</pre>
    </div><!-- /.span -->
    <div class="span6">
      <h2>流式布局</h2>
      <p>
	<code>&lt;div class="container-fluid"&gt;</code> 提供灵活的页面结构，定义了最小和最大宽度，拥有一个左边栏。很适合做应用和文档。
      </p>
      <div class="mini-layout fluid">
        <div class="mini-layout-sidebar"></div>
        <div class="mini-layout-body"></div>
      </div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;
  &lt;div class="row-fluid"&gt;
    &lt;div class="span2"&gt;
      &lt;!--Sidebar content--&gt;
    &lt;/div&gt;
    &lt;div class="span10"&gt;
      &lt;!--Body content--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    </div><!-- /.span -->
  </div><!-- /.row -->
</section>




<!-- Responsive design
================================================== -->
<section id="responsive">
  <div class="page-header">
    <h1>响应式设计 <small>Media Query根据设备和分辨率的不同而使用不同样式</small></h1>
  </div>
  <!-- Supported devices -->
  <div class="row">
    <div class="span4">
      <p><img src="assets/img/responsive-illustrations.png" alt="Responsive devices"></p>
      <h3>响应式设计用来做什么？</h3>
      <p>
	Medias Query允许浏览器基于不同的条件而使用不同的CSS：比如宽高比，宽度，显示类型等等。但最常用的条件还是 <code>min-width</code> 和 <code>max-width</code> 。
      </p>
      <ul>
        <li>在栅格中修改列的宽度</li>
        <li>堆叠元素，而不是让其浮动</li>
        <li>根据不同设备重置标题和文字的大小，以获得更好的阅读体验。</li>
      </ul>
      <p>
	谨慎地使用media query，建议仅仅将其做为你的手机用户的初体验。对于大型项目而言，最好还是选择专业的代码库，而不是进行层层的media查询。
      </p>
    </div><!-- /.span -->
    <div class="span8">
      <h2>支持的设备</h2>
      <p>
	Bootstrap在responsive.less文件中提供了一组media query，令你的项目可以更为便捷地适应多种设备和分辨率。包括：
      </p>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>设备</th>
            <th>布局宽度</th>
            <th>列宽度</th>
            <th>间隔宽度</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>智能手机</td>
            <td>&lt;=480px</td>
            <td class="muted" colspan="2">流式列，非固定宽度</td>
          </tr>
          <tr>
            <td>智能手机到垂直平板</td>
            <td>&lt;=767px</td>
            <td class="muted" colspan="2">流式列，非固定宽度</td>
          </tr>
          <tr>
            <td>水平平板</td>
            <td>&gt;=768px</td>
            <td>42px</td>
            <td>20px</td>
          </tr>
          <tr>
            <td>默认</td>
            <td>&gt;=980px</td>
            <td>60px</td>
            <td>20px</td>
          </tr>
          <tr>
            <td>大分辨率</td>
            <td>&gt;=1200px</td>
            <td>70px</td>
            <td>30px</td>
          </tr>
        </tbody>
      </table>

      <h3>要求有meta标签</h3>
      <p>
	要确保设备能正常显示响应式页面，就要添加meta标签
      </p>
      <pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
    </div><!-- /.span -->
  </div><!-- /.row -->

  <br>

  <!-- Media query code -->
  <h2>使用media query</h2>
  <div class="row">
    <div class="span4">
      <p>
	Bootstrap不会自动包含media query，但理解和添加media query却是非常容易。
	如下这般，即可在Bootstrap中包含响应式特性:
      </p>
      <ol>
        <li>使用编译后的bootstrap-responsive.css</li>
        <li>添加 @import "responsive.less" ，然后重新编译Bootstrap</li>
        <li>修改并重编译responsive.less为一个单独的文件</li>
      </ol>
      <p><strong>为什么不直接包含它呢?</strong> 说实话，并不是什么应用都需要响应性设计，响应性不是必须的。 与其让开发者移除这个特性，不如由我们动手。</p>
    </div><!-- /.span -->
    <div class="span8">
<pre class="prettyprint linenums">
  // 水平状态的手机及以下
  @media (max-width: 480px) { ... }

  // 界于水平手机与竖直平板之间
  @media (max-width: 768px) { ... }

  // 界于竖直平板与水平平板/桌面之间
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // 宽桌面
  @media (min-width: 1200px) { .. }
</pre>
    </div><!-- /.span -->
  </div><!-- /.row -->
  <br>

  <!-- Responsive utility classes -->
  <h2>用于响应性的实用类</h2>
  <div class="row">
    <div class="span4">
      <h3>介绍</h2>
      <p>
	为了更高效友好地面向手机开发，可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。
      </p>
      <h3>何时适用</h2>
      <p>
	你的网站已经有了一点底子，但并不想再为不同设备而重新创建一个完全不同的站点，这种情况就适合使用实用类来完善呈现效果。
      </p>
      <p>
	例如，你仅仅想在使用手机浏览时显示 <code>&lt;select&gt;</code> 做为导航，而在使用平板和桌面浏览时，就隐藏起来。
      </p>
    </div><!-- /.span -->
    <div class="span8">
      <h3>支持的类</h3>
      <p>
	下面展示了可用的类，及其在media query（由设备标识）下的效果。
	这些类保存在 <code>responsive.less</code> 。
      </p>
      <table class="table table-bordered table-striped responsive-utilities">
        <thead>
          <tr>
            <th>类</th>
            <th>手机 <small>&lt;=480px</small></th>
            <th>平板 <small>&lt;=767px</small></th>
            <th>桌面 <small>&gt;=768px</small></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th><code>.visible-phone</code></th>
            <td class="is-visible">显示</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <th><code>.visible-tablet</code></th>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">显示</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <th><code>.visible-desktop</code></th>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">显示</td>
          </tr>
          <tr>
            <th><code>.hidden-phone</code></th>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">显示</td>
            <td class="is-visible">显示</td>
          </tr>
          <tr>
            <th><code>.hidden-tablet</code></th>
            <td class="is-visible">显示</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">显示</td>
          </tr>
          <tr>
            <th><code>.hidden-desktop</code></th>
            <td class="is-visible">显示</td>
            <td class="is-visible">显示</td>
            <td class="is-hidden">隐藏</td>
          </tr>
        </tbody>
      </table>
      <h3>测试案例</h3>
      <p>
	改变你的浏览器尺寸，或是不在同的设备上浏览，以观察上述类的效果。
      </p>
      <h4>显示...</h4>
      <ul class="responsive-utilities-test">
        <li>手机<span class="visible-phone">&#10004; 手机</span></li>
        <li>平板<span class="visible-tablet">&#10004; 平板</span></li>
        <li>桌面<span class="visible-desktop">&#10004; 桌面</span></li>
      </ul>
      <h4>隐藏...</h4>
      <ul class="responsive-utilities-test hidden-on">
        <li>手机<span class="hidden-phone">&#10004; 手机</span></li>
        <li>平板<span class="hidden-tablet">&#10004; 平板</span></li>
        <li>桌面<span class="hidden-desktop">&#10004; 桌面</span></li>
      </ul>
    </div><!-- /.span -->
  </div><!-- /.row -->

      
  <div class="row">
    <div class="span4">
    </div><!-- /.span -->
  </div><!-- /.row -->
</section>


     <!-- Footer
      ================================================== -->
     <footer class="footer"> 
        <p class="pull-right"><a href="#">回到顶端</a></p>
        <p>我们倾注世间之爱于设计与创作 <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>，由<a href="http://weibo.com/tvlikedev">Tvlike.me/TV来客开发者</a>翻译</p>
        <p>开源依照 <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a> 发布。 文档依照 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a> 发布。</p>
        <p>Icons取自 <a href="http://glyphicons.com">Glyphicons Free</a>，授权依照 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>。</p>
      </footer>

    </div><!-- /container -->



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>


  </body>
</html>
